<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="handleClose"
    :title="'查看 - 合同信息'"
    width="600px"
    @close="handleClose"
  >
    <el-descriptions :column="1" border class="custom-descriptions">
      <el-descriptions-item label="合同编号">
        <div class="info-value">{{ contractData.contractNo }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="合同名称">
        <div class="info-value">{{ contractData.contractName }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="客户名称">
        <div class="info-value">{{ contractData.customerName }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="销售人员">
        <div class="info-value">{{ contractData.salesPerson }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="交付日期">
        <div class="info-value">{{ contractData.deliveryDate }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="验收日期">
        <div class="info-value">{{ contractData.acceptanceDate }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="交付地址">
        <div class="info-value">{{ contractData.deliveryAddress }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="签订日期">
        <div class="info-value">{{ contractData.signDate }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="客户联系人">
        <div class="info-value">{{ contractData.contactPerson }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="客户联系电话">
        <div class="info-value">{{ contractData.contactPhone }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        <div class="info-value">{{ contractData.remark || '-' }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="附件">
        <div class="info-value">{{ contractData.attachment || '-' }}</div>
      </el-descriptions-item>
    </el-descriptions>
    
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template> -->
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  contractData: {
    type: Object,
    default: () => ({})
  }
})

// 定义emits
const emit = defineEmits(['update:visible', 'close'])

// 处理关闭
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}
</script>

<style scoped>
.custom-descriptions {
  width: 100%;
  margin-bottom: 0;
}

.custom-descriptions .el-descriptions__item {
  display: flex;
  border-bottom: 1px solid #EBEEF5;
  min-height: 48px;
}

.custom-descriptions .el-descriptions__label {
  width: 120px;
  font-weight: 500;
  color: #606266;
  text-align: center;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-descriptions .el-descriptions__content {
  flex: 1;
  color: #303133;
  display: flex;
  align-items: center;
  padding: 12px 16px !important;
}

.custom-descriptions .el-descriptions__row:last-child .el-descriptions__item {
  border-bottom: none;
}

.info-value {
  width: 100%;
  word-break: break-all;
}

.dialog-footer {
  text-align: center;
}
</style>